<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Natalia Margolis</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="vendor/waypoints/jquery.waypoints.min.js" type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Special+Elite|Averia+Serif+Libre:400,700" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="styles.css">

        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-76154066-1', 'auto');
          ga('send', 'pageview');

        </script>
    </head>
    <body>

        <div id="map">
            <img id="airplane" src="img/airplane.svg">
            <div class="onoffswitch" title="Toggle between Tour Mode and Resume Mode">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                </label>
            </div>

            <div id="welcome" class="floating">

                <h3>Hello!</h3>

                <p>This story map will take you through my journey to becoming a software engineer. Coming from the nonprofit industry and experience in grassroots movements, I am excited to work on technology with a purpose.</p>
                <button type="button" class="tour-button nextButton" id="startTourButton">Start tour</button>
            </div>

              <div id="lastStop" class="floating tourPopupContent">

                <h3>...Your team!</h3>

                <p>If my experience figuring out how to solve technical problems on the job in non-profits, combined with over 5 years of software engineering experience make me a good fit for your team, let's talk!</p>
                <button type="button" class="tour-button" id="endTourButton">Close and explore resume</button>
            </div>


            <div class="progress outer-progress">
                <div class="progress inner-progress"></div>
                <div class="progress-step"></div>
            </div>

        </div>

            <div id="features">
                
            <section class="resume-intro">
                <h2>Resume</h2>
                <p class="center">Scroll to explore</p>
            </section>
            <section class="resume-intro">
                    <b>Technologies: </b> <br>
                    JavaScript (Node, React), HTML/CSS, SQL, AWS cloud technologies (Cloudformation, Lambdas, Cloudfront, ECS, and more than I can list), Mapbox, Git<br>
            </section>
            <section id="hackbright" class="resume-item">
                <div class="item-logo" id="hb-logo"></div>
                <h3>Hackbright Academy</h3>
                <p class="job-title">Software Engineering Fellow</p>
                <ul>
                    <li>Languages: Python, SQL, JavaScript, HTML/CSS</li>
                    <li>Frameworks/tools: Flask, Bootstrap, Git</li>
                    <li>Project: <a href="https://tenantconnect.herokuapp.com/" target="_blank">TenantConnect</a>, a web app that allows tenants to rate landlords and message each other
                </ul>
            </section>
            <section id="georgetown" class="resume-item">
                <div class="item-logo" id="gtown-logo"></div>
                <h3>Georgetown University</h3>
                <p class="job-title">Science, Technology and International Affairs</p>
                <ul>
                    <li>Relevant courses: JavaScript, C++, GIS, Remote Sensing</li>
                </ul>
            </section>
            <section id="bic" class="resume-item">
                <div class="item-logo" id="bic-logo"></div>
                <h3>Bank Information Center</h3>
                <p class="job-title">Information Services Coordinator</p>
                <ul>
                    <li>Ensured website security patches, theme and plugins were up to date and compatible</li>
                    <li>Coordinated technology infrastructure and troubleshooting within and across offices</li>
                    <li>Managed production on publications, including e-newsletters, case-studies and brochures</li>
                </ul>
            </section>
            <section id="rgc" class="resume-item">
                <div class="item-logo" id="rgc-logo"></div>
                <h3>Robert Graham Center</h3>
                <p class="job-title">Research Assistant</p>
                <ul>
                    <li>Conducted literature review for research on behavioral geography and access</li>
                    <li>Identified and implemented solution for migrating to a cloud-based citation database using ETL process</li>
                </ul>
            </section>
            <section id="belize" class="resume-item">
                <div class="item-logo" id="belize-logo"></div>
                <h3>Belize</h3>
                <p class="job-title">Ancient Maya Geoarcheology Research Assistant</p>
                <ul>
                    <li>Excavated, collected, and analyzed soil profiles, water samples, and GPS data </li>
                </ul>
            </section>
            <section id="mayor" class="resume-item">
                <div class="item-logo" id="sf-logo"></div>
                <h3>San Francisco Mayor's Office</h3>
                <p class="job-title">Urban Agriculture Intern</p>
                <ul>
                    <li>Compiled, updated, and mapped data from audit of city-owned land for its urban agriculture potential</li>
                    <li>Acted as a liaison between stakeholder groups, City departments and the Mayor’s Office</li>
                </ul>
            </section>
            <section id="volunteer">
                <h3>Volunteer Work</h3>
                <p><b>Anti-eviction Mapping Project:</b> Mapping relocation with d3.js, cleaning and geocoding data, finidng data sources</p>
                <p><b>DC Fair Food:</b> Cofounder of chapter of Coalition of Immokalee Workers’ ally network
                <p><b>Student/Farmworker Alliance:</b> National steering committee member
            </section>
            <section id="footer">
                <h3>Other Interests</h3> <p> When I'm not coding, mapping, or organizing, I'm going on outdoor adventures, reading, learning Catalan, or solving crossword puzzles.</p>
                <br>
            </section>
            <section id="more-info">
                <div id="contact">
                <h3>Find me</h3>
                    <a href="https://github.com/Nmargolis" class="socialLink" target="_blank">
                        <img src="img/stitch_github.png" alt="github" title= height="50" width="50">
                    </a>
                    <a href="https://www.linkedin.com/in/nataliasmargolis" class="socialLink" target="_blank">
                        <img src="img/stitch_linked_in.png" alt="linkedin" height="50" width="50">
                    </a>
                    <a href="https://twitter.com/nsmargolis" class="socialLink" target="_blank">
                        <img src="img/stitch_twitter.png" alt="twitter" height="50" width="50">
                    </a>
                </div>
                <p><a class="centered-link" href="resume.pdf" target="_blank" rel="nofollow">Download resume</a></p>
                <p><a class="centered-link" href="https://github.com/Nmargolis/story-resume" target="_blank">Explore the code for this on github</a>.</p>

            </section>               
            </div>

        <script type="text/javascript" src="scripts.js"></script>

    </body>
</html>